<template>
  <div id="category_container">
    <header-nav :headTitle="sortType" :goBack="true"></header-nav>
    <div class="category_cnt">
      <section class="sort_item" :class="{choose_type:sortBy == 'category' || sortBy == 'category_cur'}">
        <div class="sort_item_container" @click="changeType('category')">
          <span :class="{category_title: sortBy == 'category' || sortBy == 'category_cur'}">Category</span>
          <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
            <polygon points="0,3 10,3 5,8"/>
          </svg>
        </div>
        <transition name="showlist">
          <section v-show="sortBy == 'category'" class="sort_detail_type">
            <ul>
              <li v-for="(category, index) in categoryList" :key="index" :class="{curSelct: sortType == category.category_name}"
                  :data-categoryid = "category.category_id" @click="filterList(category.category_name, $event)">
                {{category.category_name}}
              </li>
            </ul>
          </section>
        </transition>
      </section>

      <section class="sort_item" :class="{choose_type:sortBy == 'brand' || sortBy == 'brand_cur' }">
        <div class="sort_item_container" @click="changeType('brand')">
          <span :class="{category_title: sortBy == 'brand' || sortBy == 'brand_cur' }">brand</span>
          <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
            <polygon points="0,3 10,3 5,8"/>
          </svg>
        </div>
        <transition name="showlist">
          <section v-show="sortBy == 'brand'" class="sort_detail_type">
            <ul>
              <li v-for="(brand, index) in brandList" :key="index" :class="{curSelct: sortType == brand.brand_name}"
                  :data-brandid = "brand.brand_id" @click="filterList( brand.brand_name, $event)">
                {{brand.brand_name}}
              </li>
            </ul>
          </section>
        </transition>
      </section>
      <section class="sort_item" :class="{choose_type:sortBy == 'gender' || sortBy == 'gender_cur'}">
        <div class="sort_item_container" @click="changeType('gender')">
          <span :class="{category_title: sortBy == 'gender'  || sortBy == 'gender_cur'}">Gender</span>
          <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
            <polygon points="0,3 10,3 5,8"/>
          </svg>
        </div>
        <transition name="showlist">
          <section v-show="sortBy == 'gender'" class="sort_detail_type">
            <ul>
              <li v-for="(gender, index) in genderList" :key="index" :class="{curSelct: sortType == gender.gender_name}"
                  :data-genderid = "gender.gender_id" @click="filterList(gender.gender_name, $event)">
                {{gender.gender_name}}
              </li>
            </ul>
          </section>
        </transition>
      </section>
      <section class="sort_item" :class="{choose_type:sortBy == 'sort' || sortBy == 'sort_cur'}">
        <div class="sort_item_container" @click="changeType('sort')">
          <span :class="{category_title: sortBy == 'sort' || sortBy == 'sort_cur'}">Price Sort</span>
          <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
            <polygon points="0,3 10,3 5,8"/>
          </svg>
        </div>
        <transition name="showlist">
          <section v-show="sortBy == 'sort'" class="sort_detail_type">
            <ul>
              <li data-sorttype = "1" :class="{curSelct: sortType == 'Low to High'}" @click="filterList('Low to High', $event)">Low to High</li>
              <li data-sorttype = "0" :class="{curSelct: sortType == 'High to Low'}" @click="filterList('High to Low', $event)">High to Low</li>
            </ul>
          </section>
        </transition>
      </section>
    </div>
    <grid-list :keyword="keyword" :brandId="brandId" :categoryId="categoryId" :genderId="genderId" :sort="sort"></grid-list>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
  import HeaderNav from '../../components/HeaderNav.vue'
  import FooterNav from '../../components/FooterNav.vue'
  import GridList from '../../components/Gird.vue'
  import { imgBaseUrl } from '../../config/env'
  import { categories, productCategories } from '../../service/getData'
  export default {
  	data() {
  		return {
        sortType: '全部',
        sortBy: '',
        brandList: [],
        genderList: [],
        categoryList: [],
        brandId: null,
        categoryId: null,
        genderId: null,
        sort: null,
        keyword: null
      }
    },
    components: {
      HeaderNav,
      FooterNav,
      GridList,
    },
    created() {
  		if(!this.$route.query.brand_id) {
  			this.sortBy = ''
        this.brandId = null
      } else {
        this.sortBy = 'brand_cur'
        this.brandId = this.$route.query.brand_id
      }
      if(!this.$route.query.brand_name) {
        this.sortType = '全部'
      } else {
        this.sortType = this.$route.query.brand_name
      }
      this.initData()
    },
    methods: {
  		async initData() {
        await categories('brand').then(res => {
          this.brandList = res.data
        })
        await categories('category').then(res => {
          this.categoryList = res.data
        })
        await categories('gender').then(res => {
          this.genderList = res.data
        })
      },
      changeType(type) {
  			if(this.sortBy == type) {
          this.sortBy = ''
        } else {
          this.sortBy = type
        }
      },
      filterList(message, event) {
        this.brandId = event.target.getAttribute('data-brandid')
        this.categoryId = event.target.getAttribute('data-categoryid')
        this.genderId = event.target.getAttribute('data-genderid')
        this.sort = event.target.getAttribute('data-sorttype')
        this.sortType = message
      }
    },
    watch: {
      keyword: function () {
        this.sortBy = ''
      },
      brandId: function () {
        this.sortBy = 'brand_cur'
      },
      categoryId: function () {
        this.sortBy = 'category_cur'
      },
      genderId: function () {
        this.sortBy = 'gender_cur'
      },
      sort: function () {
        this.sortBy = 'sort_cur'
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  #category_container {
    padding-top:1.9rem;
  }
  .category_cnt {
    @include fj;
  }
  .sort_item{
    @include sc(0.55rem, #444);
    @include wh(33.3%, 1.6rem);
    text-align: center;
    line-height: 1rem;
    .sort_item_container{
      @include wh(100%, 100%);
      position: relative;
      z-index: 14;
      background-color: #fff;
      box-sizing: border-box;
      padding-top: .3rem;
      .sort_item_border{
        height: 1rem;
        border-right: 0.025rem solid $bc;
      }
    }
    .sort_icon{
      vertical-align: middle;
      transition: all .3s;
      fill:#666;
    }

  }
  .choose_type{
    .sort_item_container{

      background-color: #f3f3f3;
      .category_title{
        color: $blue;
      }
      .sort_icon{
        transform: rotate(180deg);
        fill:$blue;
      }
    }
  }
  .sort_detail_type{
    width: 100%;
    position: absolute;
    display:flex;
    top: 3.2rem;
    left: 0;
    border-top: 0.025rem solid $bc;
    -webkit-box-shadow:  0 8px 5px rgba(0, 0, 0, .1);
    -moz-box-shadow:  0 8px 5px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 8px rgba(0, 0, 0, .1);
    background-color: #f5f5f5;
    ul {
      padding-top: 0.4rem;
      @include fj;
      justify-content: flex-start;
      flex-wrap: wrap;
      li {
        padding:0.2rem 0.4rem;
      }
      .curSelct {
        color: $blue;
        background-color: #f5f5f5;
      }
    }
  }
  .showlist-enter-active, .showlist-leave-active {
    transition: all .3s;
    transform: translateY(0);
  }
  .showlist-enter, .showlist-leave-active {
    opacity: 0;
    transform: translateY(-100%);
  }
</style>
